<template>
	<view>
		<view class="header">

			<image class="set" src="@/static/png/set.png" mode="widthFix" @click="toSet"></image>
			<!-- 手机号 头像 -->
			<view class="person">
				<image class="headPic" v-if="!mood.avatar" src="@/static/carType/headSculpture.png" mode="widthFix">
				</image>
				<image class="headPic" v-if="mood.avatar" :src="mood.avatar" mode="aspectFill"
					style="border-radius: 100%;width: 118rpx;height: 118rpx;"></image>
				<view class="info">
					<view class="phone">
						{{mood.nickName}}
					</view>
					<view class="writePersonInfo" @click="perfect">
						<view class="text">
							完善个人资料
						</view>
						<image class="pencil" src="@/static/png/pencil.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 优惠券 收藏司机 -->
			<view class="menu">
				<view class="meun_item" @click="youhua">
					<image class="menu_icon" src="@/static/png/coupon.png" mode="widthFix"></image>
					<view>
						优惠券<text style="color:#979797">(1)张</text>
					</view>
				</view>
				<view class="meun_item" @click="toShou">
					<image class="menu_icon" src="@/static/png/Collect.png" mode="widthFix"></image>
					<view>
						收藏司机
					</view>
				</view>
			</view>
		</view>
		<!-- 广告 -->
		<view class="activityPic">
			<view class="activityMain">
				<image class="title" src="@/static/png/tongcheng.png" mode="widthFix"></image>
				<text>大车发货送120元现金</text>
			</view>
			<view class="btn">去看看</view>
			<image class="gift" src="@/static/png/gift.png" mode="widthFix"></image>
		</view>
		<view class="convenientUse">
			<text class="title" @click="ceshi">便捷功能</text>
			<view class="main">
				<view class="item" v-for="(item,i) in bianjieData" :key="item.title" @click="toUrl(i)">
					<view class="reddot" v-if="reddot==1 && i==9"></view>
					<image :src="item.src" mode="widthFix"></image>
					<view class="tit">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import orderjs from '@/api/modules/order.js'
	export default {
		data() {
			return {
				mood: {},
				bianjieData: [{
						src: "../../static/png/addressbook.png",
						title: "地址簿"
					}, {
						src: "../../static/png/shuqian.png",
						title: "抬头管理"
					},
					{
						src: "../../static/png/fapiao.png",
						title: "开发票"
					},
					{
						src: "../../static/png/postion.png",
						title: "常用路线"
					}, {
						src: "../../static/png/addressbook.png",
						title: "司机加盟"
					},
					{
						src: "../../static/png/i.png",
						title: "法律条款"
					},
					{
						src: "../../static/png/headset.png",
						title: "客户服务"
					},
					{
						src: "../../static/png/feiji.png",
						title: "发平台建单"
					}, {
						src: "../../static/tabBar/tui.png",
						title: "推广中心"
					}, {
						src: "../../static/tabBar/we.png",
						title: "关于我们"
					}
				],
				users: {},
				reddot:0,
				vision:"1.1.1"
			}
		},
		methods: {
			ceshi() {
				orderjs.shipperCancelOrder({
					orderId: "1686711393385"
				}).then((res) => {
					console.log(res, 1212121212)
				})
			},
			perfect() {
				uni.navigateTo({
					url: '/subPackages/home/SetUp/PersonalInfo/PersonalInfo'
				})
			},
			youhua() {
				uni.showToast({
					title: '功能暂未开发',
					icon: 'none'
				})
			},
			async cread() {
				let res = await this.$http.users.details()
				this.mood = res.data.data
			},
			toSet() {
				uni.navigateTo({
					url: '/subPackages/home/SetUp/SetUp'
				})
			},
			toUrl(e) {
				let url = ''
				switch (e) {
					case 0:
						url = '/subPackages/order/addressBook/addressBook';
						break;
					case 1:
						url = '/subPackages/home/InvoiceModule/writeInvoice/writeInvoice';
						break;
					case 2:
						url = '/subPackages/home/InvoiceModule/SelectOrder_trip/SelectOrder_trip';
						break;
					case 3:
						url = '/subPackages/home/Commonly/Commonly';
						break;
					case 4:
						uni.showToast({
							title: '功能暂未开发',
							icon: 'none'
						})
						break;
					case 5:
						uni.showToast({
							title: '功能暂未开发',
							icon: 'none'
						})
						break;
					case 6:
						uni.showToast({
							title: '功能暂未开发',
							icon: 'none'
						})
						break;
					case 7:
						url = '/subPackages/home/platform/platform';
						break;
					case 8:
						url = '/subPackages/home/promotion/promotion';
						break;
						case 9:
							url = '/pages/home/we/we?reddot='+this.reddot+'&vision='+this.vision;
							break;
				}
				uni.navigateTo({
					url
				})
			},
			toShou() {
				uni.navigateTo({
					url: '/subPackages/home/CollectDrivers/CollectDrivers'
				})
			}

		},
		onShow(e) {
			this.cread()
			this.reddot = 0;
			let systemInfo = uni.getSystemInfoSync();
			let vision = systemInfo.appVersion;
			orderjs.queryVision({}).then((res)=>{
				if(res.data.data.cargoApp!=vision){
					this.reddot = 1;
					this.vision = res.data.data.cargoApp;
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.reddot{
		position: absolute;
		    width: 6px;
		    height: 6px;
		    background: #DD001B;
		    border: 0px;
		    border-radius: 3px;
		    right: 50rpx;
			top:4rpx;
	}
	.header {
		width: 750rpx;
		background-color: #00A0E9;
		height: 326rpx;
		position: relative;

		>.set {
			height: 34.01rpx;
			width: 38rpx;
			top: 80rpx;
			right: 30rpx;
			position: absolute;
		}

		.person {
			display: flex;
			position: absolute;
			top: 108rpx;
			left: 40rpx;
			color: #FFFFFF;
			align-items: center;



			.headPic {
				height: 108rpx;
				width: 108rpx;
				margin-right: 20rpx;

			}

			.info {
				.phone {
					font-size: 36rpx;
					font-weight: bold;
				}

				.writePersonInfo {
					display: flex;
					align-items: center;

					>.text {
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					>.pencil {
						width: 24rpx;
						height: 24rpx;
						color: #fff;
					}
				}
			}
		}

		.menu {
			height: 180rpx;
			width: 690rpx;
			background-color: #fff;
			position: absolute;
			left: 30rpx;
			top: 256rpx;
			border-radius: 20rpx;
			display: flex;
			font-size: 26rpx;
			color: #000000;
			align-items: center;
			justify-content: space-around;

			>.meun_item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.menu_icon {
					height: 58rpx;
					width: 58rpx;
					margin-bottom: 13rpx;

				}
			}
		}
	}

	.activityPic {
		width: 690rpx;
		height: 164rpx;
		display: flex;
		border-radius: 20rpx;
		background-color: #fff;
		align-items: center;
		box-sizing: border-box;
		margin: 130rpx auto 0;



		.activityMain {
			display: flex;
			flex-direction: column;
			margin-left: 44rpx;
			margin-right: 27rpx;

			.title {
				width: 94.09rpx;
				height: 18.1rpx;
				margin-bottom: 16rpx;
			}

			>text {
				color: #000000;
				font-size: 32rpx;
			}
		}

		>.btn {
			border-radius: 20rpx;
			background-color: #FA973E;
			color: #fff;
			padding: 6rpx 13rpx 5rpx;
			font-size: 21rpx;
			margin: 69rpx 0 55rpx;
			box-sizing: border-box;
		}

		>.gift {
			height: 168rpx;
			width: 168rpx;
			margin-left: auto;
		}
	}

	.convenientUse {
		width: 690rpx;
		margin: 20rpx auto 0;
		padding: 30rpx 42rpx 43rpx 42rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		color: #000;
		flex-direction: column;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		>.title {
			font-size: 28rpx;
		}
		.main {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			margin-top: 20rpx;
			margin: 20rpx auto 43rpx;


			>.item {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-bottom: 48rpx;
				position: relative;
				>image {
					height: 48rpx;
					width: 48rpx;
					margin-bottom: 10rpx;
				}

				>.tit {
					font-size: 26rpx;

				}
			}
		}


	}
</style>